<template>
  <div :style="{marginLeft: prConfig+'px', marginRight: prConfig+'px', marginTop: slider+'px', background: bgColor, borderRadius: bgStyle === 1 ? '10px' : '0'}">
    <!-- 标题栏 -->
    <div class="hot-title-container">
      <div class="hot-title" :style="{color: titleBarColor, fontSize: titleBarFontSize + 'px'}">{{titleBarText}}</div>
      <div class="more-link" :style="{color: moreTextColor, fontSize: moreFontSize + 'px'}" @click="handleMoreClick">
        {{moreText}} &gt;
      </div>
    </div>
    
    <!-- 咨询列表 -->
    <div class="consultation-list">
      <!-- 图文展示 -->
      <div class="consultation-item" v-for="(item, index) in consultationList" :key="index" :style="{background: itemBgColor}">
        <div class="item-left">
          <div class="img-box">
            <img :src="item.img || ''" alt="" class="item-image" :class="{ 'empty-image': !item.img }">
            <div class="empty-box" v-if="!item.img"> <span class="iconfont-diy icontupian"></span> </div>
          </div>
        </div>
        <div class="item-right">
          <div class="item-title" :style="{color: titleColor, fontSize: titleFontSize + 'px'}">{{item.info[0].value}}</div>
          <div class="item-desc" :style="{color: descColor, fontSize: descFontSize + 'px'}">{{item.info[1].value}}</div>
          <div class="item-button" :style="{background: buttonColor, color: buttonTextColor, fontSize: buttonFontSize + 'px'}" @click="handleItemClick(item)">{{buttonText}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'card_hot_info',
  cname: '热点资讯',
  icon: 'icontupianmofang2',
  configName: 'c_card_hot_info',
  type: 3, // 0 基础组件 1 营销组件 2工具组件
  defaultName: 'cardHotInfo',
  props: {
    index: { type: null },
    num: { type: null }
  },
  computed: {
    ...mapState('mobildConfig', ['defaultArray'])
  },
  watch: {
    pageData: {
      handler(nVal) {
        this.setConfig(nVal)
      },
      deep: true
    },
    num: {
      handler(nVal) {
        const data = this.$store.state.mobildConfig.defaultArray[nVal]
        this.setConfig(data)
      },
      deep: true
    },
    'defaultArray': {
      handler(nVal) {
        const data = this.$store.state.mobildConfig.defaultArray[this.num]
        this.setConfig(data)
      },
      deep: true
    }
  },
  data() {
    return {
      defaultConfig: {
        name: 'cardHotInfo',
        timestamp: this.num,
        setUp: {
          tabVal: "0"
        },
  
        hotConfig: {
          title: '热点咨询内容',
          maxList: 10,
          isCube: false,
          list: [
            {
              img: '',
              info: [
                { title: '标题', value: 'AI探索 万物生长', tips: '请输入标题', max: 50 },
                { title: '描述', value: '2025人工智能创新应用峰会', tips: '请输入描述', max: 100 },
                { title: '链接', value: '', tips: '请选择链接', max: 255 }
              ]
            },
            {
              image: '',
              info: [
                { title: '标题', value: '社区AI中医亭', tips: '请输入标题', max: 50 },
                { title: '描述', value: '卫健委要求2025年前全国覆盖', tips: '请输入描述', max: 100 },
                { title: '链接', value: '', tips: '请选择链接', max: 255 }
              ]
            }
          ]
        },
        titleBarText: {
          title: '标题栏文字',
          value: '热点咨询',
          max: 20
        },
        titleBarColor: {
          title: '标题栏文字颜色',
          name: 'titleBarColor',
          default: [{ item: '#333333' }],
          color: [{ item: '#333333' }]
        },
        titleBarFontSize: {
          title: '标题栏文字大小',
          val: 20,
          min: 12,
          max: 24
        },
        moreText: {
          title: '更多文字',
          value: '更多',
          max: 10
        },
        moreTextColor: {
          title: '更多文字颜色',
          name: 'moreTextColor',
          default: [{ item: '#666666' }],
          color: [{ item: '#666666' }]
        },
        moreFontSize: {
          title: '更多文字大小',
          val: 14,
          min: 10,
          max: 20
        },
        moreLink: {
          title: '链接',
          value: '',
          tips: '请选择链接',
          max: 255
        },
        buttonText: {
          title: '按钮文字',
          value: '立即查看',
          max: 10
        },
        titleColor: {
          title: '标题颜色',
          name: 'titleColor',
          default: [{ item: '#333333' }],
          color: [{ item: '#333333' }]
        },
        descColor: {
          title: '描述颜色',
          name: 'descColor',
          default: [{ item: '#666666' }],
          color: [{ item: '#666666' }]
        },
        buttonColor: {
          title: '按钮背景色',
          name: 'buttonColor',
          default: [{ item: '#cfe3f8' }],
          color: [{ item: '#cfe3f8' }]
        },
        buttonTextColor: {
          title: '按钮文字颜色',
          name: 'buttonTextColor',
          default: [{ item: '#0096f4' }],
          color: [{ item: '#0096f4' }]
        },
        titleFontSize: {
          title: '标题字体大小',
          val: 20,
          min: 10,
          max: 20
        },
        descFontSize: {
          title: '描述字体大小',
          val: 16,
          min: 8,
          max: 16
        },
        buttonFontSize: {
          title: '按钮字体大小',
          val: 18,
          min: 8,
          max: 16
        },
        bgColor: {
          title: '背景颜色',
          name: 'bgColor',
          default: [{ item: '#fff' }],
          color: [{ item: '#fff' }]
        },
        bgStyle: {
          title: '背景样式',
          name: 'bgStyle',
          type: 0,
          list: [
            {
              val: '直角',
              icon: 'iconPic_square'
            },
            {
              val: '圆角',
              icon: 'iconPic_fillet'
            }
          ]
        },
        itemBgColor: {
          title: '咨询项背景颜色',
          name: 'itemBgColor',
          default: [{ item: '#f9f9f9' }],
          color: [{ item: '#f9f9f9' }]
        },
        prConfig: {
          title: '左右边距',
          val: 0,
          min: 0
        },
        mbConfig: {
          title: '上下边距',
          val: 0,
          min: 0
        }
      },
      consultationList: [],
      titleColor: '',
      descColor: '',
      buttonColor: '',
      buttonTextColor: '',
      bgColor: '',
      itemBgColor: '',
      bgStyle: 0,
      prConfig: 0,
      slider: 0,

      titleFontSize: 20,
      descFontSize: 16,
      buttonFontSize: 18,
      titleBarText: '热点咨询',
      titleBarColor: '#333333',
      titleBarFontSize: 20,
      moreText: '更多',
      moreTextColor: '#666666',
      moreFontSize: 14,
      moreLink: '',
      buttonText: '立即查看',
      pageData: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.pageData = this.$store.state.mobildConfig.defaultArray[this.num]
      this.setConfig(this.pageData)
    })
  },
  methods: {
    setConfig(data) {
      if (!data) return
      if (data.mbConfig) {
        this.titleColor = data.titleColor.color[0].item
        this.descColor = data.descColor.color[0].item
        this.buttonColor = data.buttonColor.color[0].item
        this.buttonTextColor = data.buttonTextColor.color[0].item
        this.bgStyle = data.bgStyle.type
        this.prConfig = data.prConfig.val
        this.slider = data.mbConfig.val
        this.bgColor = data.bgColor.color[0].item
        this.itemBgColor = data.itemBgColor ? data.itemBgColor.color[0].item : '#f9f9f9'
        // 标题栏配置
        this.titleBarText = data.titleBarText ? data.titleBarText.value : '热点咨询'
        this.titleBarColor = data.titleBarColor ? data.titleBarColor.color[0].item : '#333333'
        this.titleBarFontSize = data.titleBarFontSize ? data.titleBarFontSize.val : 16
        // 更多按钮配置
        this.moreText = data.moreText ? data.moreText.value : '更多'
        this.moreTextColor = data.moreTextColor ? data.moreTextColor.color[0].item : '#666666'
        this.moreFontSize = data.moreFontSize ? data.moreFontSize.val : 14
        this.moreLink = data.moreLink ? data.moreLink.value : ''
        // 按钮文字配置
        this.buttonText = data.buttonText ? data.buttonText.value : '立即查看'
        // 字体大小配置
        this.titleFontSize = data.titleFontSize ? data.titleFontSize.val : 14
        this.descFontSize = data.descFontSize ? data.descFontSize.val : 12
        this.buttonFontSize = data.buttonFontSize ? data.buttonFontSize.val : 12
        // 直接使用数组而不是转换对象
        this.consultationList = data.hotConfig.list || []
      }
    },
    handleItemClick(item) {
      if (item.info && item.info[2] && item.info[2].value) {
        window.location.href = item.info[2].value
      }
    },
    handleMoreClick() {
      if (this.moreLink) {
        window.location.href = this.moreLink
      }
    }
  }
}
</script>

<style scoped lang="scss">
/* 移除.pageOn类，改用内联样式控制圆角 */
.empty-image {
  opacity: 0;
}

.hot-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 12px 10px;
  // border-bottom: 1px solid #f5f5f5;

  .hot-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }

  .more-link {
    font-size: 14px;
    color: #666;
  }
}

.consultation-list {
  padding: 10px 12px;

  .consultation-item {
    display: flex;
    padding: 0;
    align-items: center;
    margin-bottom: 5px;
    border-radius: 10px; 
    &:last-child {
      border-bottom: none;
    }

    &.list-style {
      flex-direction: column;
      align-items: flex-start;
      padding: 15px 0;

      .item-date {
        font-size: 12px;
        color: #999;
        margin-bottom: 8px;
      }

      .item-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .item-left {
      width: 150px; 
      height: 150px;
      flex-shrink: 0;

      .img-box {
        width: 100%;
        height: 100%;
        border-radius: 10px; 
        background-color: #f5f5f5;
        position: relative;

        .item-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 10px;

        }

        .empty-box {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ccc;

          .icontupian {
            font-size: 24px;
            line-height: 1;
          }
        }
      }
    }

    .item-right {
      flex: 1;
      padding-left: 10px; /* 添加左侧内边距确保文字不紧贴图片 */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;

      .item-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .item-desc {
        font-size: 15px;
        margin-bottom: 18px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .item-button {
        align-items: center;
        width: 80%;
        margin: 0 auto;
        padding: 8px;
        border-radius: 30px;
        cursor: pointer;
        text-align: center;
        .text{
            font-size: 12px;;
        }
      }
    }
  }
}
</style>